(김준회) SWP 파일 업로드 취소 기능 추가, 업로드 파일명 검증로직에서 파일명 비필수로 변경

1 files changed, 197 insertions, 149 deletions

diff --git a/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx b/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx
index ba78bfdf..dc6fbe7c 100644
--- a/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx
+++ b/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useState, useEffect, useTransition } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
-import { InfoIcon } from "lucide-react";
+import { InfoIcon, Upload } from "lucide-react";
 import { SwpTable } from "@/lib/swp/table/swp-table";
 import { SwpTableToolbar } from "@/lib/swp/table/swp-table-toolbar";
 import {
@@ -14,36 +14,20 @@ import {
   fetchVendorSwpStats,
   getVendorSessionInfo,
 } from "@/lib/swp/vendor-actions";
-import { type SwpTableFilters, type SwpDocumentWithStats } from "@/lib/swp/actions";
+import type { DocumentListItem } from "@/lib/swp/document-service";
+import { toast } from "sonner";
 
 interface VendorDocumentPageProps {
   searchParams: { [key: string]: string | string[] | undefined };
 }
 
 export default function VendorDocumentPage({ searchParams }: VendorDocumentPageProps) {
-  const router = useRouter();
-  const params = useSearchParams();
-  const [isPending, startTransition] = useTransition();
-
-  // URL에서 필터 파라미터 추출 (vndrCd는 제외 - 서버에서 자동 설정)
-  const initialFilters: SwpTableFilters = {
-    projNo: (searchParams.projNo as string) || "",
-    docNo: (searchParams.docNo as string) || "",
-    docTitle: (searchParams.docTitle as string) || "",
-    pkgNo: (searchParams.pkgNo as string) || "",
-    stage: (searchParams.stage as string) || "",
-  };
-
-  const initialPage = parseInt((searchParams.page as string) || "1", 10);
-  const initialPageSize = parseInt((searchParams.pageSize as string) || "100", 10);
+  // URL에서 프로젝트 번호만 사용 (나머지는 클라이언트 필터링)
+  const initialProjNo = (searchParams.projNo as string) || "";
 
   // 상태 관리
-  const [documents, setDocuments] = useState<SwpDocumentWithStats[]>([]);
-  const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(initialPage);
-  const [pageSize] = useState(initialPageSize);
-  const [totalPages, setTotalPages] = useState(0);
-  const [filters, setFilters] = useState<SwpTableFilters>(initialFilters);
+  const [documents, setDocuments] = useState<DocumentListItem[]>([]);
+  const [projNo, setProjNo] = useState(initialProjNo);
   const [projects, setProjects] = useState<Array<{ PROJ_NO: string; PROJ_NM: string }>>([]);
   const [stats, setStats] = useState({
     total_documents: 0,
@@ -59,91 +43,132 @@ export default function VendorDocumentPage({ searchParams }: VendorDocumentPageP
     companyId: number;
   } | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // 초기 데이터 로드
-  useEffect(() => {
-    loadInitialData();
-  }, []);
+  // 클라이언트 필터
+  const [searchFilters, setSearchFilters] = useState({
+    docNo: (searchParams.docNo as string) || "",
+    docTitle: (searchParams.docTitle as string) || "",
+    pkgNo: (searchParams.pkgNo as string) || "",
+    stage: (searchParams.stage as string) || "",
+  });
 
-  // 필터 변경 시 데이터 재로드
-  useEffect(() => {
-    if (!isLoading) {
-      loadDocuments();
+  // Dropzone 설정
+  const [droppedFiles, setDroppedFiles] = useState<File[]>([]);
+
+  // 파일 드롭 핸들러
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (acceptedFiles.length > 0) {
+      setDroppedFiles(acceptedFiles);
     }
-  }, [filters, page]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    noClick: true, // 클릭으로 파일 선택 비활성화 (버튼을 통해서만 선택)
+    noKeyboard: true,
+  });
 
-  const loadInitialData = async () => {
+  const loadInitialData = useCallback(async () => {
     try {
       setIsLoading(true);
       setError(null);
 
-      // 병렬로 데이터 로드 (벤더 정보 포함)
-      const [vendorInfoData, projectsData, statsData, documentsData] = await Promise.all([
+      // 병렬로 데이터 로드
+      const [vendorInfoData, projectsData] = await Promise.all([
         getVendorSessionInfo(),
         fetchVendorProjects(),
-        fetchVendorSwpStats(),
-        fetchVendorDocuments({
-          page,
-          pageSize,
-          filters: Object.keys(initialFilters).length > 0 ? initialFilters : undefined,
-        }),
       ]);
 
       setVendorInfo(vendorInfoData);
       setProjects(projectsData);
-      setStats(statsData);
-      setDocuments(documentsData.data);
-      setTotal(documentsData.total);
-      setTotalPages(documentsData.totalPages);
+
+      // 초기 프로젝트가 있으면 문서 로드
+      if (initialProjNo) {
+        const [documentsData, statsData] = await Promise.all([
+          fetchVendorDocuments(initialProjNo),
+          fetchVendorSwpStats(initialProjNo),
+        ]);
+        setDocuments(documentsData);
+        setStats(statsData);
+      }
     } catch (err) {
       console.error("초기 데이터 로드 실패:", err);
       setError(err instanceof Error ? err.message : "데이터 로드 실패");
+      toast.error("데이터 로드 실패");
+    } finally {
+      setIsLoading(false);
     }
-    setIsLoading(false); // finally 대신 여기서 호출
-  };
+  }, [initialProjNo]);
 
-  const loadDocuments = async () => {
-    startTransition(async () => {
-      try {
-        const data = await fetchVendorDocuments({
-          page,
-          pageSize,
-          filters: Object.keys(filters).some((key) => filters[key as keyof SwpTableFilters])
-            ? filters
-            : undefined,
-        });
-
-        setDocuments(data.data);
-        setTotal(data.total);
-        setTotalPages(data.totalPages);
-
-        // URL 업데이트
-        const params = new URLSearchParams();
-        if (filters.projNo) params.set("projNo", filters.projNo);
-        if (filters.docNo) params.set("docNo", filters.docNo);
-        if (filters.docTitle) params.set("docTitle", filters.docTitle);
-        if (filters.pkgNo) params.set("pkgNo", filters.pkgNo);
-        if (filters.stage) params.set("stage", filters.stage);
-        if (page !== 1) params.set("page", page.toString());
-
-        router.push(`?${params.toString()}`, { scroll: false });
-      } catch (err) {
-        console.error("문서 로드 실패:", err);
-        setError(err instanceof Error ? err.message : "문서 로드 실패");
-      }
-    });
+  const loadDocuments = useCallback(async () => {
+    if (!projNo) return;
+
+    try {
+      setIsRefreshing(true);
+      setError(null);
+
+      const [documentsData, statsData] = await Promise.all([
+        fetchVendorDocuments(projNo),
+        fetchVendorSwpStats(projNo),
+      ]);
+
+      setDocuments(documentsData);
+      setStats(statsData);
+      toast.success("문서 목록을 갱신했습니다");
+    } catch (err) {
+      console.error("문서 로드 실패:", err);
+      setError(err instanceof Error ? err.message : "문서 로드 실패");
+      toast.error("문서 로드 실패");
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [projNo]);
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    loadInitialData();
+  }, [loadInitialData]);
+
+  // 프로젝트 변경 시 문서 재로드
+  useEffect(() => {
+    if (!isLoading && projNo) {
+      loadDocuments();
+    }
+  }, [projNo, isLoading, loadDocuments]);
+
+  const handleProjectChange = (newProjNo: string) => {
+    setProjNo(newProjNo);
   };
 
-  const handleFiltersChange = (newFilters: SwpTableFilters) => {
-    setFilters(newFilters);
-    setPage(1); // 필터 변경 시 첫 페이지로
+  const handleFiltersChange = (filters: typeof searchFilters) => {
+    setSearchFilters(filters);
   };
 
-  const handlePageChange = (newPage: number) => {
-    setPage(newPage);
+  const handleRefresh = () => {
+    loadDocuments();
   };
 
+  // 클라이언트 사이드 필터링
+  const filteredDocuments = useMemo(() => {
+    return documents.filter((doc) => {
+      if (searchFilters.docNo && !doc.DOC_NO.toLowerCase().includes(searchFilters.docNo.toLowerCase())) {
+        return false;
+      }
+      if (searchFilters.docTitle && !doc.DOC_TITLE.toLowerCase().includes(searchFilters.docTitle.toLowerCase())) {
+        return false;
+      }
+      if (searchFilters.pkgNo && !doc.PKG_NO?.toLowerCase().includes(searchFilters.pkgNo.toLowerCase())) {
+        return false;
+      }
+      if (searchFilters.stage && doc.STAGE !== searchFilters.stage) {
+        return false;
+      }
+      return true;
+    });
+  }, [documents, searchFilters]);
+
   if (isLoading) {
     return (
       <Card>
@@ -159,78 +184,101 @@ export default function VendorDocumentPage({ searchParams }: VendorDocumentPageP
     );
   }
 
-
   return (
-    <div className="space-y-6">
-      {/* 에러 메시지 */}
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
+    <div {...getRootProps()} className="relative">
+      <input {...getInputProps()} />
+      
+      {/* 드래그 오버레이 */}
+      {isDragActive && (
+        <div className="fixed inset-0 z-50 bg-primary/20 backdrop-blur-sm flex items-center justify-center">
+          <div className="bg-background border-2 border-dashed border-primary rounded-lg p-12 text-center space-y-4">
+            <Upload className="h-16 w-16 mx-auto text-primary animate-bounce" />
+            <div className="space-y-2">
+              <p className="text-2xl font-semibold">파일을 여기에 드롭하세요</p>
+              <p className="text-muted-foreground">
+                여러 파일을 한 번에 업로드할 수 있습니다
+              </p>
+            </div>
+          </div>
+        </div>
       )}
 
-      {/* 통계 카드 */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardHeader className="pb-3">
-            <CardDescription>할당된 문서</CardDescription>
-            <CardTitle className="text-3xl">{stats.total_documents.toLocaleString()}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card>
-          <CardHeader className="pb-3">
-            <CardDescription>총 리비전</CardDescription>
-            <CardTitle className="text-3xl">{stats.total_revisions.toLocaleString()}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card>
-          <CardHeader className="pb-3">
-            <CardDescription>총 파일</CardDescription>
-            <CardTitle className="text-3xl">{stats.total_files.toLocaleString()}</CardTitle>
-          </CardHeader>
-        </Card>
+      <div className="space-y-6">
+        {/* 에러 메시지 */}
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* 통계 카드 */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardDescription>할당된 문서</CardDescription>
+              <CardTitle className="text-3xl">{stats.total_documents.toLocaleString()}</CardTitle>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardDescription>총 리비전</CardDescription>
+              <CardTitle className="text-3xl">{stats.total_revisions.toLocaleString()}</CardTitle>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardDescription>총 파일</CardDescription>
+              <CardTitle className="text-3xl">{stats.total_files.toLocaleString()}</CardTitle>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardDescription>업로드한 파일</CardDescription>
+              <CardTitle className="text-3xl text-green-600">
+                {stats.uploaded_files.toLocaleString()}
+              </CardTitle>
+            </CardHeader>
+          </Card>
+        </div>
+
+        {/* 안내 메시지 */}
+        {documents.length === 0 && !projNo && (
+          <Alert>
+            <InfoIcon className="h-4 w-4" />
+            <AlertDescription>
+              프로젝트를 선택하여 할당된 문서를 확인하세요.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* 메인 테이블 */}
         <Card>
-          <CardHeader className="pb-3">
-            <CardDescription>업로드한 파일</CardDescription>
-            <CardTitle className="text-3xl text-green-600">
-              {stats.uploaded_files.toLocaleString()}
-            </CardTitle>
+          <CardHeader>
+            <SwpTableToolbar
+              projNo={projNo}
+              filters={searchFilters}
+              onProjNoChange={handleProjectChange}
+              onFiltersChange={handleFiltersChange}
+              onRefresh={handleRefresh}
+              isRefreshing={isRefreshing}
+              projects={projects}
+              vendorCode={vendorInfo?.vendorCode}
+              droppedFiles={droppedFiles}
+              onFilesProcessed={() => setDroppedFiles([])}
+              documents={filteredDocuments}
+              userId={String(vendorInfo?.vendorId || "")}
+            />
           </CardHeader>
+          <CardContent>
+            <SwpTable
+              documents={filteredDocuments}
+              projNo={projNo}
+              vendorCode={vendorInfo?.vendorCode || ""}
+              userId={String(vendorInfo?.vendorId || "")}
+            />
+          </CardContent>
         </Card>
       </div>
-
-      {/* 안내 메시지 */}
-      {documents.length === 0 && !filters.projNo && (
-        <Alert>
-          <InfoIcon className="h-4 w-4" />
-          <AlertDescription>
-            프로젝트를 선택하여 할당된 문서를 확인하세요.
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {/* 메인 테이블 */}
-      <Card>
-        <CardHeader>
-          <SwpTableToolbar
-            filters={filters}
-            onFiltersChange={handleFiltersChange}
-            projects={projects}
-            vendorCode={vendorInfo?.vendorCode}
-          />
-        </CardHeader>
-        <CardContent>
-          <SwpTable
-            initialData={documents}
-            total={total}
-            page={page}
-            pageSize={pageSize}
-            totalPages={totalPages}
-            onPageChange={handlePageChange}
-          />
-        </CardContent>
-      </Card>
     </div>
   );
 }
-